@use "sass:color";
@use "../variable";
@use "../helper";

//
// Basic Bootstrap table
//

.table {
  width: 100%;
  max-width: 100%;
  background-color: helper.hex(variable.$table-background-color); // Reset for nesting within parents with `background-color`.

  & > thead > tr > th {
    text-align: left;
    vertical-align: bottom;
    border-bottom: (2 * variable.$table-border-width) solid variable.$table-border-color;
  }

  & > thead > tr > th,
  & > tbody > tr > td,
  & > tfoot > tr > td {
    padding: 0.75 * variable.$font-size-base;
    vertical-align: top;
    border-top: variable.$table-border-width solid variable.$table-border-color;
  }
}

.table-unstyled {
  width: 100%;
  max-width: 100%;
  background-color: transparent;
  td, th{
    border-top: 0;
    border-bottom: 0;
    text-align: left;
  }
}


//
// Condensed table w/ half padding
//

.table-sm {
  & > thead > tr > th,
  & > tbody > tr > td,
  & > tfoot > tr > td {
    padding: 0.3 * variable.$font-size-base;;
  }
}


// Bordered version
//
// Add borders all around the table and between all the columns.

.table-bordered {
  border: variable.$table-border-width solid helper.hex(variable.$table-border-color);

  & > thead > tr > th,
  & > tbody > tr > td,
  & > tfoot > tr > td {
    border: variable.$table-border-width solid helper.hex(variable.$table-border-color);
  }

  & > thead {
    & > tr > th,
    & > tr > td {
      border-bottom-width: (2 * variable.$table-border-width);
    }
  }
}


// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)

.table-striped {
  & > tbody > tr:nth-of-type(odd) {
    background-color: helper.hex(variable.$table-accent-bg);
  }
}


// Table backgrounds
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.

@each $color, $value in variable.$theme-colors {
  .table-#{$color} {
    &,
    > th,
    > td {
      background-color: helper.hex(helper.tint-color($value, 85%));
    }
  }
}



// Dark styles
//
// Same table markup, but inverted color scheme: dark background and light text.

.thead-dark {
  th {
    color: helper.hex(variable.$white);
    background-color: helper.hex(variable.$gray-900);
  }
}

.thead-light {
  th {
    color: helper.hex(variable.$gray-700);
    background-color: helper.hex(variable.$gray-200);
  }
}

.table-dark {
  color: helper.hex(variable.$white);
  background-color: helper.hex(variable.$gray-900);

  & > thead > tr > th,
  & > tbody > tr > td,
  & > tfoot > tr > td {
    border-color: #32383e;
  }

  &.table-bordered {
    border: 0;
  }

  &.table-striped {
    & > tbody > tr:nth-of-type(odd) {
      background-color: #2c3034;
    }
  }
}
